﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>charts</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="charts.css" rel="stylesheet" />
    <script src="charts.js"></script>
    <link href="../../css/ui.css" rel="stylesheet" />
    <script src="data.js"></script>
    <script src="../../controls/charts.js"></script>
    <script src="../../controls/AquaGauge.js"></script>
</head>
<body>
    <div class="charts fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">charts</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main" style="overflow:scroll;">
            <div >
             <div data-win-control= "WinJSToolkit.Controls.PlotChart" data-win-options="{itemDataSource : DataExample.itemList.dataSource,itemDataHeader : DataExample.itemHeader.dataSource}" id="can" style= "height:400px; width:700px;"></div>
             <div data-win-control= "WinJSToolkit.Controls.BarChart" data-win-options="{itemDataSource : DataExample.BarChartDS.dataSource,title:'Operating System'}" id="Div1" style= "height:400px; width:700px;"></div>
             <div data-win-control= "WinJSToolkit.Controls.PieChart" data-win-options="{itemDataSource : DataExample.BarChartDS.dataSource,title:'Operating System'}" id="Div3" style= "height:400px; width:700px;"></div>
             <div data-win-control= "WinJSToolkit.Controls.GaugeChart" data-minimum=0 data-maximum=100 data-value=19 data-title="WinJS Toolkit" data-subtitle="Gauge Chart" style= "height:400px; background-color:blue;  width:400px;"></div>
        </div>
        </section>
    </div>
</body>
</html>
